<template>
  <div id="table">
    <div class="warptable">
      <div class="one bgone">
        <div class="wai">
          <el-progress
            type="dashboard"
            :percentage="10"
            :color="colors"
            class="panz"
          ></el-progress>
          <div class="spanw"><span>CPU使用率</span></div>
        </div>
      </div>

      <div class="one bgtwo">
        <div class="wai">
          <el-progress
            type="dashboard"
            :percentage="35"
            :color="colors1"
            class="panz"
          ></el-progress>
          <div class="spanw"><span>内存使用率</span></div>
        </div>
      </div>
      <div class="one bgthree">
        <div class="wai">
          <el-progress
            type="dashboard"
            :percentage="85"
            :color="colors2"
            class="panz"
          ></el-progress>
          <div class="spanw"><span>虚拟机使用率</span></div>
        </div>
      </div>
      <div class="one bgfour">
        <div class="wai">
          <el-progress
            type="dashboard"
            :percentage="20"
            :color="colors3"
            class="panz"
          ></el-progress>
          <div class="spanw"><span>硬盘使用率</span></div>
        </div>
      </div>
    </div>
    <!-- 上面是仪表盘  下面是饼状图和线条图 -->
    <!-- <div id="myChart" :style="{ width: '300px', height: '300px' }"></div> -->
    <div id="myChart" :style="{ width: '1000px', height: '500px' ,padding:'20px 0px 0px 0px'}"></div>
  </div>
</template>
<script>
export default {
  name: "count",
  data() {
    return {
      percentage: 10,
      colors: [{ color: "#f56c6c", percentage: 10 }],
      colors1: [{ color: "yellow", percentage: 35 }],
      colors2: [{ color: "blue", percentage: 35 }],
      colors3: [{ color: "orange", percentage: 35 }],
    };
  },
  // 饼状条形图
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    setTimeout(function () {
     var option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["Matcha Latte", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ["Milk Tea", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
            ["Walnut Brownie", 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012",
            },
          },
        ],
      };

      myChart.on("updateAxisPointer", function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });

      myChart.setOption(option);
    });
  },
  methods: {},
};
</script>
<style>
@import "../assets/count.css";
</style>